window.addEventListener("load", function() {
    //1.获取元素
    var imgs = document.querySelectorAll(".sImg img");
    var sImg = document.querySelector(".sImg");
    var sapns = document.querySelectorAll(".switch span");
    var item_r = document.querySelector(".item_r");
    var item_l = document.querySelector(".item_l");
    var preview_img = document.querySelector(".preview_img");
    var mask = document.querySelector(".mask");
    var big = document.querySelector(".big");
    var bigImg = document.querySelector(".bigImg");
    var bImg = document.querySelector(".bImg img");
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onmouseover = function() {
            var bigSrc = this.src.split("tourism/")[1];
            bImg.src = bigSrc;
            bigImg.src = bigSrc;
            //鼠标经过时清除定时器
            clearInterval(timer);
            //清除定时器变量
            timer = null;
        }
        imgs[i].onmouseleave = function() {
            bImg.src = "images/wx2.png";
            bigImg.src = "images/wx2.png";
            timer = setInterval(shuffling, 2000);
        }
        imgs[i].onclick = function() {
            var bigSrc = this.src.split("tourism/")[1];
            bImg.src = bigSrc;
            bigImg.src = bigSrc;
            this.onmouseleave = null;
            this.onmouseover = null;
        }
    }
    var index = 0;
    //向右移动一张图片
    item_r.addEventListener("click", function() {
        shuffling();
    })

    //向左一定一张图片
    item_l.addEventListener("click", function() {
        sImg.style.transition = "all 0.2s";
        if (index == 0) {
            index = 4;
            sImg.style.transition = "none";
        }
        index--;
        sImg.style.transform = "translateX(" + -108 * index + "px)";
    })

    for (var i = 0; i < sapns.length; i++) {
        sapns[i].addEventListener("mouseover", function() {
            cleanTimer();
        })
        sapns[i].addEventListener("mouseleave", function() {
            timer = setInterval(shuffling, 2000);
        })
    }

    //利用定时器启动轮播
    var timer = setInterval(shuffling, 2000);

    //2:绑定事件
    //2.1鼠标经过preview_img时mask和big显示出来
    preview_img.addEventListener("mouseover", function() {
            mask.style.display = "block";
            big.style.display = "block";
        })
        //2.2鼠标离开preview_img时mask和big隐藏起来
    preview_img.addEventListener("mouseout", function() {
            mask.style.display = "none";
            big.style.display = "none";
        })
        //2.3鼠标移动mask跟着一起移动
    preview_img.addEventListener("mousemove", function(e) {
        //计算出鼠标在preview_img中的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        //使鼠标的坐标保持在mask的水平垂直居中的位置
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        var maskXmax = preview_img.offsetWidth - mask.offsetWidth;
        var maskYmax = preview_img.offsetHeight - mask.offsetHeight;
        //判断maskX和maskY的合理性
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskXmax) {
            maskX = maskXmax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskYmax) {
            maskY = maskYmax;
        }
        //将maskX和maskY给mask
        mask.style.left = maskX + "px";
        mask.style.top = maskY + "px";
        //计算bigX和bigY
        var bigXmax = big.offsetWidth - bigImg.offsetWidth;
        var bigYmax = big.offsetHeight - bigImg.offsetHeight;
        var bigX = maskX * bigXmax / maskXmax;
        var bigY = maskY * bigYmax / maskYmax;
        //判断bigX和bigY的合理性 这个不能加 要同步左边的变化
        /*if (bigX<=0) {
        	bigX=0;
        } else if (bigX>=bigXmax) {
        	bigX=bigXmax;
        }
        if (bigY<=0) {
        	bigY=0;
        } else if (bigY>=bigYmax) {
        	bigY=bigYmax;
        }*/
        //将bigX和bigY赋值给bigImg
        bigImg.style.left = bigX + "px";
        bigImg.style.top = bigY + "px";
    })

    //轮播的方法
    function shuffling() {
        index++;
        //添加过渡效果
        sImg.style.transition = "all 0.2s";
        if (index == 4) {
            index = 0;
            sImg.style.transition = "none";
        }
        sImg.style.transform = "translateX(" + -108 * index + "px)";
    }

    //清除定时器的方法
    function cleanTimer() {
        //鼠标经过时清除定时器
        clearInterval(timer);
        //清除定时器变量
        timer = null;
    }

})